<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            width: 100px;
        }
    </style>
</head>

<body>
    <h1>这是购物车页面，<a href="list.html">继续购物</a></h1>
    <table border="1" width="800" align="center">
        <thead>
            <tr>
                <th>图片</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
                <th width=40>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="6">购物车为空，<a href="./list.html">继续选购</a></td>
            </tr>
            <!-- <tr>
                <td><img src="" alt=""></td>
                <td>名称</td>
                <td>99.00</td>
                <td><input type="number" min="1" value="5"></td>
                <td>数量*单价</td>
                <td>删除</td>
            </tr> -->
        </tbody>
    </table>
</body>
<script src="./data/goods.js"></script>
<script>

    class Cart{
        constructor(){
            this.tbody = document.querySelector("tbody")

            this.load()
            this.addEvent()
        }
        load(){
            ajax({
                url:"kajshfiuas"
            }).then(data=>{
                this.data = JSON.parse(data)
                this.render()
            })
        }
        render(){
            // 读取数据
            this.localData = localStorage.getItem("proData") ? JSON.parse(localStorage.getItem("proData")) : [];
            // 判断购物车是否为空
            if(this.localData.length< 1) return;

            // console.log(this.data)
            // console.log(this.localData)

            let str = "";
            this.data.forEach(val1 => {
                this.localData.forEach(val2=>{
                    if(val1.proId === val2.id){
                        str += `<tr index="${val2.id}">
                                <td><img src="${val1.proImg}" alt=""></td>
                                <td>${val1.proName}</td>
                                <td>${val1.price}</td>
                                <td><input class="set" type="number" min="1" value="${val2.num}"></td>
                                <td>${val2.num*val1.price}</td>
                                <td class="del">删除</td>
                            </tr>`
                    }
                })
            });
            this.tbody.innerHTML = str;
        }
        addEvent(){
            const that = this;
            this.tbody.addEventListener("click",function(e){
                if(e.target.className === "del"){
                    // 获取id
                    that.id = e.target.parentNode.getAttribute("index")
                    // 删DOM
                    e.target.parentNode.remove()
                    // 删数据
                    that.setData(i=>that.localData.splice(i, 1));
                }
            })
            this.tbody.addEventListener("input",function(e){
                if(e.target.className === "set"){
                    that.id = e.target.parentNode.parentNode.getAttribute("index")
                    that.setData(i=>that.localData[i].num=e.target.value)
                }
            })
        }
        setData(cb){
            // 从本地存储的数据中找到点击删除的商品的id
            let i = 0;
            this.localData.some((val,idx)=>{
                i = idx;
                return val.id === this.id
            })
            // 从数组中删除这个id相同的数据
            cb(i)

            // 将数组重新设置回去
            localStorage.setItem("proData", JSON.stringify(this.localData))
        }
    }
    new Cart;





    function ajax(){
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(JSON.stringify(data))
            }, 500);
        })
    }
</script>
</html>